<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Starter</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="_csrf" th:content="${_csrf.token}">
    <meta name="_csrf_header" th:content="${_csrf.headerName}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/adminlte/2.4.8/bower_components/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
    <!-- Ionicons -->
    <link th:href="@{/webjars/adminlte/2.4.8/bower_components/Ionicons/css/ionicons.min.css}" rel="stylesheet">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/webjars/adminlte/2.4.8/dist/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/adminlte/2.4.8/dist/css/skins/_all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/jquery-file-upload/9.18.0/css/jquery.fileupload.css}">
    <link rel="stylesheet" th:href="@{/webjars/jquery-file-upload/9.18.0/css/jquery.fileupload-ui.css}">
    <!-- toastr 2.1.4-7 -->
    <link rel="stylesheet" th:href="@{/plug-in/toastr/2.1.4-7/toastr.min.css}">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="webjars/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
    <script src="webjars/respond/1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link th:href="@{/webjars/jquery.scrollbar/0.2.11/jquery.scrollbar.css}" rel="stylesheet">

    <link th:href="@{/css/nth-tabs.css}" rel="stylesheet">
    <link th:href="@{/css/nth-icons.css}" rel="stylesheet">
</head>
<!--<body class="hold-transition sidebar-mini fixed"  style="overflow-y:hidden" th:each="cookie :${#httpServletRequest.getCookies()}" th:if="${cookie.getName().equals('theme')}" th:class="'hold-transition sidebar-mini fixed ' + ${cookie.getValue()}">-->
<body class="hold-transition sidebar-mini fixed"  style="overflow-y:hidden" th:class="'hold-transition sidebar-mini fixed ' + ${theme}">
<div class="wrapper">

    <div th:replace="components/header :: header"></div>
    <div th:replace="components/sidebar :: sidebar"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper bg-color-white">
        <!-- Main content -->
        <section class="content container-fluid" style="padding: 0; position: relative;">
            <div class="row">
                <div class="col-md-12">
                    <div class="nth-tabs" id="editor-tabs"></div><!--使用时只需此标签，class固定,id自定义-->
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!--<div th:replace="components/footer :: footer"></div>-->
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script th:src="@{/webjars/jquery/3.3.1/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/webjars/adminlte/2.4.8/dist/js/adminlte.min.js}"></script>
<script th:src="@{/webjars/adminlte/2.4.8/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/webjars/adminlte/2.4.8/bower_components/fastclick/lib/fastclick.js}"></script>
<script th:src="@{/webjars/jquery-file-upload/9.18.0/js/vendor/jquery.ui.widget.js}"></script>
<script th:src="@{/webjars/jquery-file-upload/9.18.0/js/jquery.iframe-transport.js}"></script>
<script th:src="@{/webjars/jquery-file-upload/9.18.0/js/jquery.fileupload.js}"></script>
<script th:src="@{/webjars/jquery-file-upload/9.18.0/js/jquery.fileupload-process.js}"></script>
<script th:src="@{/webjars/jquery-file-upload/9.18.0/js/jquery.fileupload-validate.js}"></script>

<script th:src="@{/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js}"></script>

<!-- toastr 2.1.4-7 -->
<script th:src="@{/plug-in/toastr/2.1.4-7/toastr.min.js}"></script>

<script src="/js/plugins/layer/layer.min.js"></script>

<script th:src="@{/js/util.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/webjars/js-cookie/2.2.0/js.cookie.js}"></script>
<script th:src="@{/webjars/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js}"></script>
<script th:src="@{/js/nth-tabs.js}"></script>
<script>
    let nthTabs;
    $(function () {
        //解决iframe高度问题。
        //因为iframe是撑不起高度的，所以只能在这里设置父dom的高度。
        document.getElementById("editor-tabs").style.height = (document.body.scrollHeight - 100) + 'px';

        //一个低门槛的演示,更多需求看源码
        //基于bootstrap tab的自定义多标签的jquery实用插件，滚动条依赖jquery.scrollbar，图标依赖font-awesome
        nthTabs = $("#editor-tabs").nthTabs();
        nthTabs.addTab({
            id: 'home',
            title: '首页',
            url: "/easyui/home.html",
            //content: '这是首页',
            active: true,
            allowClose: false
        });
    });

    function changeTab(id, title, url) {
        let tabList = nthTabs.getTabList();
        let isExists = false;
        for(let i = 0; i < tabList.length; i++){
            console.log(tabList[i].id);
            if(tabList[i].id.substring(5) == id){
                isExists = true;
                break;
            }
        }
        let isUrlValid = true;
        if(!url || null == url || "null" == url){
            isUrlValid = false;
        }
        if(!isExists){
            nthTabs.addTab({
                id: 'tab-' + id,
                title: title,
                url: url,
                //content: '这是首页',
                active: true,
                allowClose: true
            });
        }
        if (isUrlValid){
            nthTabs.setActTab('tab-' + id);
        }

        console.log();
    }

    function showWindow(options) {
        layer.open({
            type: 2,
            title: options.title,
            shadeClose: true,
            shade: 0.6,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: options.content
        });
    }

    function toastInfo(options) {
        toastr[options.type](options.content, options.title);
    }
</script>
</body>
</html>